<template>
  <div>
    <Form
      :model="modelForm"
      ref="editForm"
      class="ivu-form-no-margin-bottom"
      :rules="rule"
      :label-width="100"
    >
      <Row :gutter="32" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="dimensionCode" :label="$t('module.dimension.dimensionCode')">
            <Input
              placeholder
              v-model.trim="modelForm.dimensionCode"
              :maxlength="50"
              :disabled="noEdit"
            ></Input>
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item prop="dimensionName" :label="$t('module.dimension.dimensionName')">
            <Input placeholder v-model="modelForm.dimensionName" :maxlength="64"></Input>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="dataStructType" :label="$t('module.dimension.dataType')">
            <RadioGroup v-model="modelForm.dataStructType" size="small">
              <Radio :label="1">{{$t('module.dimension.dataTypeRadio.tree')}}</Radio>
              <Radio :label="2">{{$t('module.dimension.dataTypeRadio.list')}}</Radio>
            </RadioGroup>
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item prop="enabled" :label="$t('common.status')">
            <RadioGroup v-model="modelForm.enabled" size="small">
              <Radio :label="1">
                <span>{{$t('common.enable')}}</span>
              </Radio>
              <Radio :label="0">
                <span>{{$t('common.disable')}}</span>
              </Radio>
            </RadioGroup>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col span="24" style="border:none;">
          <!-- module.dimension.desc 备注 改为 描述 -->
          <Form-item :label="$t('common.describe')">
            <Input
              placeholder
              type="textarea"
              :rows="4"
              v-model="modelForm.description"
              :maxlength="255"
            />
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import { getDimensionDetail, updateDimension, addDimension } from "@/api/dimensionApi.js";
import { getValueSetCode } from "@/api/valuesetCodeApi.js";
import locales from "./locales.js";
import { codeReg } from "@/const.js";

export default {
  name: "dimensionedit",
  mixins: [locales],
  props: {
    dimensionId: {
      type: String,
      default: ""
    },
    productId: {
      type: String,
      default: ""
    }
  },
  data() {
    const validateDimensionCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("module.dimension.warning.enterCode")));
      } else if (!new RegExp(codeReg).test(value)) {
        callback(new Error(this.$t("common.warning.codeCheckCharacter")));
      } else if (new RegExp("[\u4e00-\u9fa5]").test(value)) {
        callback(new Error(this.$t("common.warning.codeCheckCharacter")));
      } else if (value.length > 30) {
        callback(new Error(this.$t("common.warning.codeCheckLength")));
      }
      callback();
    };
    return {
      noEdit: false,
      modelForm: {
        id: "",
        // productId: this.productId,
        dimensionCode: "",
        dimensionName: "",
        dataStructType: 1,
        enabled: 1,
        description: ""
      },
      rule: {
        dimensionCode: [{ validator: validateDimensionCode, trigger: "blur", required: true }],
        dimensionName: [{ required: true, message: this.$t("module.dimension.warning.enterName"), trigger: "blur" }]
      },
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: this.save,
          loading: false
        },
        {
          text: this.$t("common.close"),
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    };
  },
  computed: {},
  created: function() {
    this.init();
    if (this.dimensionId) {
      this.$emit("SetTitle", this.$t("module.dimension.editDimension"));
    } else {
      this.$emit("SetTitle", this.$t("module.dimension.createDimension"));
    }
    this.$emit("SetPageWidth", 700);
    this.$emit("SetPageActions", this.actions);
  },
  methods: {
    init() {
      if (this.dimensionId) {
        this.noEdit = true;
        // $store.dispatch("QueryDimensionDetail", { id: this.dimensionId })
        getDimensionDetail(this.dimensionId).then(response => {
          this.modelForm = response.data;
          // {
          //   id: response.id,
          //   dimensionCode: response.dimensionCode,
          //   dimensionName: response.dimensionName,
          //   dataStructType: response.dataStructType,
          //   productId: response.productId,
          //   enabled: response.enabled,
          //   description: response.description
          // };
        });
      }
    },

    save() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          this.actions[0].loading = true;
          if (this.dimensionId) {
            // $store.dispatch("UpdateDimension", this.modelForm)
            updateDimension(this.modelForm).then(response => {
              this.$message.success({
                content: this.$t("module.dimension.warning.updateSuccessfully"),
                duration: 3
              })
              this.$emit("Close", true);
            })
            .catch(() => {
              this.actions[0].loading = false;
            })
          } else {
            // $store.dispatch("AddDimension", this.modelForm)
            addDimension(this.modelForm).then(response => {
              this.$message.success({
                content: this.$t("module.dimension.warning.createSuccessfully"),
                duration: 3
              });
              this.$emit("Close", true);
            })
            .catch(() => {
              this.actions[0].loading = false;
            })
          }
        }else {
          this.actions[0].loading = false;
          this.$message.error({
            content: this.$t("common.formValidateFailed"),
            duration: 3
          });
        }
      });
    }
  }
};
</script>
